import './paging.less';
export default {
    data:function(){
        return {
            pageArr:[],  //生成的page数组
            page:1
        }
    },
    props:{
        total:{ //数据总数
            type:Number,
            default:0
        },
        lineNum:{
            type:Number,  //每行显示数量
            default:10
        },
        returnNum:{
            type:Number,   //返回数据数量
            default:10
        },
        pageNum:{
            type:Number,  //当前页码
            default:1
        }
    },
    created:function(){
        this.buildPages();
    },
    watch:{
        total:function(){
            this.buildPages();
        },
        pageNum:function(){
            this.page = this.pageNum;
        }
    },
    methods: {
        //创建分页数据
        buildPages: function () {
            var tempArr = [];
            var pageNum = Math.ceil(this.total / this.returnNum);
            if (this.page <= this.lineNum / 2) {
                for (var i = 1; i <= this.lineNum / 2; i++) {
                    if (i > pageNum) break;
                    tempArr.push(i);
                }
            } else if (this.page > this.lineNum / 2) {
                for (var i = this.page; i > this.page - (this.lineNum / 2); i--) {
                    tempArr.unshift(i);
                }
            }

            if ((tempArr.length < this.lineNum) && this.lineNum / 2 < pageNum) {
                for (var i = tempArr[tempArr.length - 1] + 1; i <= tempArr[tempArr.length - 1] + (this.lineNum - tempArr.length); i++) {
                    if (i > pageNum) break;
                    tempArr.push(i);
                }
            }
            if (pageNum <= this.lineNum) {
                for (var i = tempArr[0]; i >= 1; --i) {
                    if (tempArr.indexOf(i) == -1) {
                        tempArr.unshift(i);
                    }
                }
            }
            this.pageArr = tempArr;
        },
        changePage: function (page) {
            var type = typeof page == 'number' ? 'number' : page;
            switch (type) {
                case 'number':
                    //点击数字
                    if (page == this.page) return;
                    this.page = page;
                    break;
                case 'index':
                    //首页
                    this.page = 1;
                    break;
                case 'tail':
                    //尾页
                    this.page = Math.ceil(this.total / this.returnNum);
                    break;
                case 'prev':
                    //上一页
                    this.page--;
                    break;
                case 'next':
                    //下一页
                    this.page++;
                    break;
            }
            this.buildPages();
            this.$emit('change-page',this.page);
        }
    },
    template:` 
            <ul class="louie-paging pagination" v-if="Math.ceil(total/returnNum) > 1">
                <li v-if="page>1"><a href="javascript:;" v-on:click="changePage('index')" data-type="index">首页</a></li>
                <li v-if="page>1"><a href="javascript:;" v-on:click="changePage('prev')" data-type="prev">上一页</a></li>
                <li v-for="item in pageArr" v-bind:class="item == page ? 'active':''">
                    <a href="javascript:;" v-on:click="changePage(item)" data-type="number">{{item}}</a>
                </li>
                <li v-if="page!=Math.ceil(total/returnNum)"><a href="javascript:;" v-on:click="changePage('next')" data-type="next">下一页</a></li>
                <li v-if="page!=Math.ceil(total/returnNum)"><a href="javascript:;" v-on:click="changePage('tail')" data-type="tail">尾页</a></li>
            </ul>      
            `
};